<template>
  <div>
    <div class="left-box">
      <div class="box-main box1">
        <div class="title">实时统计</div>
        <ul class="left-content-top">
          <li v-for="item in totals">
            <span class="left-num">{{ item.value }}</span>
            <span class="left-text">{{ item.name }}</span>
          </li>
        </ul>
        <div class="left-content-bottom">
          <echart :options="option1" />
        </div>
      </div>
      <div class="box-main box2">
        <div class="title">土地统计</div>
        <div class="left-content">
          <echart :options="option2" />
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="box-main boxs">
        <div class="title">土地经营占比</div>
        <div class="echart">
          <echart :options="option3" />
        </div>
      </div>
      <div class="box-main boxs">
        <div class="title">土地承包占比</div>
        <div class="echart">
          <echart :options="option4" />
        </div>
      </div>
      <div class="box-main boxs">
        <div class="title">土地流转方式统计</div>
        <div class="echart">
          <echart :options="option5" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "components/common/echart/Echart.vue";
import { echart5, echart6, echart7, echart8, echart9 } from "./option";
import { getVRLandStatistics } from "network/VRqj";
export default {
  components: { Echart },
  data() {
    return {
      option1: null,
      option2: null,
      option3: null,
      option4: null,
      option5: null,
      totals: [],
    };
  },

  mounted() {
    this.option2 = echart6();
    this.option3 = echart7();
  },
  created() {
    this.getVRLandStatistics(sessionStorage.getItem("cunId"));
  },
  methods: {
    async getVRLandStatistics(id) {
      let result = await getVRLandStatistics(id);
      this.totals = [
        {
          name: "总面积",
          value: result.result.totalArea,
        },
        {
          name: "土地确权",
          value: result.result.authenticTotal,
        },
        {
          name: "土地流转",
          value: result.result.authenticTotal,
        },
      ];
      let situationList = result.result.situationList;
      situationList = situationList.map((val) => {
        return {
          name: val.x,
          value: val.y,
        };
      });
      this.option1 = echart5(situationList);

      let wandersList = result.result.wandersList;
      wandersList = wandersList.map((val) => {
        return {
          name: val.x,
          value: val.y,
        };
      });
      this.option4 = echart8(wandersList);
      let roamListX = [],
        roamListY = [];
      result.result.roamList.forEach((element) => {
        roamListX.push(element.x);
        roamListY.push(element.y);
      });
      this.option5 = echart9(roamListX, roamListY);
    },
    refurbish(id) {
      this.getVRLandStatistics(id)
    }
  },
};
</script>

<style lang="scss" scoped>
.left-box {
  .box1 {
    .left-content-top {
      width: 90%;
      height: 6.25rem;
      margin: 1.25rem auto;
      border: 0.0625rem solid #00d1f65e;
      background: linear-gradient(transparent, #07296a);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      li {
        width: 6.25rem;
        height: 3.75rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;

        .left-text {
          color: #fff;
          font-size: 0.875rem;
        }
      }
      li [class^="left-num"] {
        display: block;
        font-size: 1.875rem;
        font-family: shuzi;
        width: 100%;
        text-align: center;
      }
      li:nth-child(1) {
        .left-num {
          color: #02c0e6;
        }
      }
      li:nth-child(2) {
        .left-num {
          color: #3df545;
        }
      }
      li:nth-child(3) {
        .left-num {
          color: #f00028;
        }
      }
    }
    .left-content-bottom {
      width: 100%;
      height: 12.5rem;
    }
  }
  .box2 {
    .left-content {
      width: 100%;
      height: 13.75rem;
    }
  }
}
.right-box {
  .boxs {
    .echart {
      width: 100%;
      height: 13.125rem;
    }
  }
}
</style>